import { BookOpen, Heart, Star, Palette, Music, TreePine } from 'lucide-react'

const categories = [
  {
    id: '1',
    name: '生活习惯',
    icon: BookOpen,
    color: 'bg-huiben-sky text-huiben-sky-dark',
    description: '培养良好习惯'
  },
  {
    id: '2',
    name: '情感教育',
    icon: Heart,
    color: 'bg-huiben-pink text-pink-700',
    description: '学会表达情感'
  },
  {
    id: '3',
    name: '认知启蒙',
    icon: Star,
    color: 'bg-huiben-yellow text-yellow-700',
    description: '开发智力潜能'
  },
  {
    id: '4',
    name: '艺术创意',
    icon: Palette,
    color: 'bg-purple-100 text-purple-700',
    description: '激发创造力'
  },
  {
    id: '5',
    name: '音乐启蒙',
    icon: Music,
    color: 'bg-green-100 text-green-700',
    description: '培养音乐素养'
  },
  {
    id: '6',
    name: '自然科学',
    icon: TreePine,
    color: 'bg-huiben-green text-green-700',
    description: '探索自然奥秘'
  }
]

export function CategoryGrid() {
  return (
    <div className="px-4 py-6">
      <div className="flex items-center gap-2 mb-4">
        <span className="text-huiben-yellow text-xl">📚</span>
        <h2 className="text-lg font-bold text-huiben-sky-dark">绘本分类</h2>
      </div>
      
      <div className="grid grid-cols-3 gap-3">
        {categories.map((category) => {
          const Icon = category.icon
          return (
            <div
              key={category.id}
              className={[
                "flex flex-col items-center p-4 rounded-2xl cursor-pointer transition-all duration-300",
                "hover:shadow-lg hover:-translate-y-1",
                category.color
              ].join(' ')}
            >
              <Icon size={24} className="mb-2" />
              <span className="text-sm font-semibold text-center mb-1">
                {category.name}
              </span>
              <span className="text-xs opacity-80 text-center">
                {category.description}
              </span>
            </div>
          )
        })}
      </div>
    </div>
  )
}